<template>
  <div class="navigatorContainer btn-grad">
    <img src="../assets/logo.png" class="logo" @click="goForum">
    <div class="navigator">
        <router-link class="navigatorItem" active-class="navigatorItem-active" to="/Attention">关注</router-link>
        <router-link class="navigatorItem" active-class="navigatorItem-active" to="/Forum">论坛</router-link>
        <router-link class="navigatorItem" active-class="navigatorItem-active" to="/Me">我的</router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Navigator',
  methods:{
    goForum(){
        if(this.$route.path!='/Forum') this.$router.push({path:'/Forum'})
    }
  }
}
</script>

<style scoped>
    .navigatorContainer{
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: sticky;
    } 
    .navigatorContainer img{
        height: 200px;
        margin-left: -45px;
    }
    .navigator{
        /* background-color: #fff; */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 250px;
        margin-right: 80px;
        line-height: 70px;
        height: 70px;
    }
    .navigatorItem{
        text-align: center;
        text-decoration: none;
        color: white;
        font-size: 20px;
        width: 60px;
    }
    .navigatorItem-active{
        color: white;
        font-weight:bold;
        border-bottom: 4px solid white;
    }
             
    .btn-grad {
        background-color: #2d2d2d;
        /* margin: 10px;
        padding: 15px 45px; */
        /* text-align: center; */
        text-transform: uppercase;
        transition: 0.5s;
        /* background-size: 200% auto; */
        color: white;            
        /* border-radius: 10px; */
        /* display: block; */
    }
         
         
</style>
